<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12_固定定位广告条</title>
    <style>
        .top{
            background-color: #5aa4ae;
            height: 120px;
            color: #fff;
            font-size: 30px;
            /*使用固定定位，让顶部广告条紧贴html视口的顶部*/
            position: fixed;
            top: 0;
            /*视口: view port 整个用来展示界面的浏览器窗口
            100vw视口宽度的100%(全屏宽)  100vh视口高度的100%(全屏高)*/
            width: 100vw;
        }
        .main{
            margin-top: 130px;
            margin-right: 90px;
            margin-left: 90px;
        }
        .left,.right{
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left{
            background-color: #FFF799;
            left: 20px;
        }
        .right{
            background-color: #F35336;
            right: 30px;
        }

    </style>
</head>
<body>
<div class="top">我是顶部的广告条</div>
<div class="left">我是左侧的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main">
    我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore expedita magni necessitatibus
        nostrum officia omnis praesentium quod, sequi ullam voluptatum. Dolor, dolore ipsam mollitia nemo optio quaerat.
        Unde.
    </div>
    <div>Delectus deserunt dolore enim minus pariatur quo suscipit? Aperiam, esse, ipsam! Ab blanditiis esse excepturi
        illo pariatur quam quis quisquam quod rem voluptates? Distinctio eaque nihil nobis quae rerum sequi.
    </div>
    <div>Ab molestiae, rerum. Beatae cupiditate deserunt dignissimos dolore doloribus, ducimus earum illo ipsum maiores
        maxime non odit, quasi quis quod ratione similique ullam? Distinctio, hic vitae! Facere pariatur quis tempora!
    </div>
    <div>A autem corporis cumque dolorum eius eligendi est facilis, fugit, harum itaque, nam possimus provident quidem
        quisquam sapiente sit vel. Ducimus eaque earum est, ex iure iusto quis unde velit!
    </div>
    <div>Adipisci atque aut deserunt, ea eius iusto laborum libero minus nobis officiis qui quidem repellat repellendus
        ut, vero vitae voluptatibus! Accusantium eius explicabo illo mollitia numquam optio soluta tempora voluptates?
    </div>
    <div>Accusantium adipisci atque aut blanditiis debitis dolore dolorem doloremque dolorum earum eius eligendi harum
        hic inventore iste iusto molestias nesciunt nisi officiis placeat quaerat quasi quod, reiciendis reprehenderit
        sapiente sequi?
    </div>
    <div>Aliquam aperiam, architecto culpa deserunt, eaque eius enim ex inventore itaque mollitia provident quod
        reprehenderit velit. Cumque eaque maxime, modi molestiae officiis quisquam sit! Consequatur iste itaque magni
        nesciunt velit.
    </div>
    <div>Eaque odit placeat sapiente! Ab accusamus ad aut consectetur cumque, distinctio dolorum eius illum iure magnam
        nam necessitatibus quae quasi quos reiciendis. Alias, aut facilis nesciunt numquam quibusdam sint unde.
    </div>
    <div>At, dolorem eius error illum necessitatibus nesciunt? Aliquam dignissimos enim facilis inventore iste itaque
        molestiae nemo obcaecati praesentium sunt! Debitis ea esse id maxime nisi perspiciatis quaerat repellendus rerum
        soluta?
    </div>
    <div>Delectus eos esse est illo impedit ipsum laborum molestiae mollitia nisi placeat, quas qui quidem quos unde ut
        veniam voluptas. Accusamus at culpa dolorem facilis in quasi vero! Eveniet, obcaecati!
    </div>
    <div>Adipisci dicta, eaque eveniet ex ipsa ipsum itaque, nam nostrum perspiciatis porro quos sapiente veritatis
        voluptatum. A, aliquam commodi delectus ducimus exercitationem id quia, sequi, soluta temporibus tenetur vitae
        voluptatem.
    </div>
    <div>Architecto at culpa dolore doloremque, earum error eveniet, ex exercitationem expedita incidunt ipsa ipsam
        ipsum iusto magni mollitia natus neque non officia optio provident qui quidem quos, repellendus suscipit
        voluptas!
    </div>
    <div>Ad assumenda dolore eius error in laboriosam magni nam placeat sit soluta. A ab accusamus consectetur, ducimus
        eius enim et exercitationem expedita fugit harum inventore libero quae rerum similique velit.
    </div>
    <div>A alias consequuntur dignissimos eum ex facere fugit illo ipsa ipsum itaque nemo officia quaerat quasi rem
        repudiandae, rerum vitae. At aut doloribus ipsam modi officiis quidem sint tempore velit.
    </div>
    <div>Delectus error explicabo natus officia perspiciatis quaerat sapiente! Adipisci animi assumenda consectetur,
        culpa cupiditate excepturi, inventore iste minima minus numquam perferendis praesentium qui quis quisquam
        repudiandae, velit vitae? Qui, voluptatibus?
    </div>
    <div>Harum illum iusto non quisquam sed soluta unde? Blanditiis dolorem exercitationem ipsum praesentium ut.
        Deleniti error fugiat nulla odio, praesentium vero! Distinctio doloribus, eveniet hic magni minima reiciendis
        sit vel.
    </div>
    <div>Alias dolorem est expedita mollitia pariatur ullam voluptas voluptatum? Accusamus autem dicta, eum maiores
        molestiae molestias neque nihil sed suscipit tempore! Beatae dolor dolore fuga illo, quidem saepe sequi ullam.
    </div>
    <div>Atque cumque, dignissimos, eius eligendi fuga iure magnam magni minima, neque quos rerum sapiente similique
        tempora temporibus vero. Fugit nemo repellat reprehenderit temporibus tenetur, veniam. Et numquam perspiciatis
        quas tempore?
    </div>
    <div>Esse incidunt magni nam nesciunt numquam quis sed? Excepturi hic iste nihil quaerat quas! Assumenda eaque
        excepturi, iusto modi nam nihil provident quo sunt suscipit ut. Atque distinctio pariatur voluptas!
    </div>
    <div>Aliquam doloremque dolores earum eos et, ex excepturi fugit iste labore laboriosam libero magnam molestias
        natus odio porro quam quasi quod, reprehenderit ullam veniam? Aperiam est possimus praesentium quia velit?
    </div>
    <div>Dolores facilis fuga harum laborum mollitia nihil nobis, porro provident quia sed sint, ullam? Aliquam
        aspernatur atque necessitatibus non odio placeat quod repellat suscipit tempora! Consectetur debitis hic laborum
        nostrum?
    </div>
    <div>Aliquam at ducimus molestiae molestias optio placeat tempore? Amet culpa debitis delectus dolores eveniet,
        excepturi explicabo laudantium, nihil nisi perferendis provident quisquam quo, recusandae sit voluptate. Cumque
        dolore sequi suscipit?
    </div>
    <div>Accusantium aperiam architecto, beatae commodi consequuntur esse ipsam laborum minus nihil numquam omnis porro
        possimus quia quibusdam repellat repudiandae similique sint sit temporibus voluptatem! Atque blanditiis esse
        quas reiciendis repellat.
    </div>
    <div>A, accusamus adipisci corporis doloremque eius error incidunt quod ratione temporibus vitae? At est incidunt
        obcaecati officia possimus provident soluta voluptatibus. Amet cum doloribus id laborum modi molestias ratione
        vitae?
    </div>
    <div>Dolores error, excepturi harum ipsum iste minima natus odio odit perferendis, provident qui vel. Ab, maiores,
        porro? Obcaecati, quaerat, sed. Blanditiis consectetur debitis delectus facere, impedit ipsam porro recusandae
        repellendus!
    </div>
    <div>Animi doloremque eligendi impedit incidunt inventore molestiae officiis praesentium quasi sequi voluptatum. Ab
        blanditiis cumque dicta dolorem dolores ducimus, earum fuga natus, neque nisi obcaecati quaerat sint ullam, unde
        velit.
    </div>
    <div>Ad eligendi labore laborum maiores molestiae, neque non omnis reprehenderit similique sint tempora tempore, vel
        voluptatum? Accusamus adipisci at deleniti dolorum neque officiis, similique unde vero. Dicta dolorum officia
        provident?
    </div>
    <div>Accusamus ad autem deserunt dolor dolorem dolores ducimus ea eaque harum ipsam ipsum magnam mollitia nihil non,
        nostrum nulla odio quaerat quo saepe sed suscipit ut vel vero vitae voluptatem.
    </div>
    <div>Aliquid cum dolore eos est explicabo, laboriosam magnam minima molestias necessitatibus quaerat sint totam
        velit vitae voluptate voluptates? Esse ex illo porro quaerat quis recusandae sit suscipit tempore voluptates,
        voluptatibus!
    </div>
    <div>Assumenda, aut cumque dolorem eligendi ex facere in laborum magnam modi mollitia nobis non nulla numquam omnis
        placeat quaerat quam qui quo reiciendis sed vel vitae, voluptatibus! Debitis pariatur, quaerat.
    </div>
    <div>Assumenda atque blanditiis dolore fugit hic, odio. Architecto at consequatur ducimus facere harum
        necessitatibus, nemo porro? Ab, earum et harum nesciunt nulla perspiciatis quas repellat sit tempora tenetur
        ullam vero!
    </div>
    <div>Accusantium at consequuntur deleniti eum exercitationem inventore itaque laboriosam mollitia neque, nihil nisi
        obcaecati odit officia omnis porro, possimus praesentium quaerat quidem quisquam ratione rem repellendus
        similique suscipit unde voluptatem?
    </div>
    <div>Atque commodi cum eos hic magnam quas unde? A asperiores deserunt, ex laborum magnam minima odit porro
        praesentium quae quo quod sapiente similique, sint sit tempore totam vero! Amet, odio.
    </div>
    <div>Nostrum, qui, velit. Alias dolorem dolores ea provident ratione suscipit totam voluptate. Adipisci aliquid
        exercitationem iste molestiae, nam necessitatibus neque omnis quasi recusandae, sed sunt suscipit! Corporis
        dolores laboriosam mollitia!
    </div>
    <div>A adipisci atque dolores doloribus earum, expedita nam nemo nihil nulla quam quos repellat, tempore, velit.
        Dicta ipsum nisi reprehenderit. Accusamus alias aut dicta doloremque ex ipsum nulla quasi vero.
    </div>
    <div>Ad cum dolore illo iusto nihil, optio voluptatem. Alias aliquid at atque autem dolor, eveniet explicabo
        inventore iste, maiores mollitia nesciunt nulla obcaecati, porro praesentium quae sed similique voluptas
        voluptatum!
    </div>
    <div>Aliquam aliquid asperiores blanditiis consequatur delectus distinctio exercitationem expedita explicabo in
        ipsam ipsum, itaque maiores maxime nesciunt nulla odio perferendis praesentium quam quidem ratione rem
        repellendus repudiandae rerum sequi voluptas.
    </div>
    <div>Ad alias cum deserunt distinctio earum est facilis, fuga fugit impedit ipsa minus numquam odio quo, repellat
        sunt temporibus voluptatem voluptatum. Amet deleniti dicta dolore doloribus explicabo minima nulla, quasi.
    </div>
    <div>Animi assumenda, at dolorum earum est, fuga hic inventore magni modi placeat rem sunt vitae. Adipisci aliquam
        architecto beatae delectus dolore, facilis minus nemo quam temporibus voluptatibus. Adipisci, expedita, nulla?
    </div>
    <div>Alias architecto at atque distinctio doloremque dolores doloribus esse et id illum mollitia nam, quae saepe
        tempora temporibus ullam voluptates! Adipisci assumenda consectetur consequatur culpa cupiditate, obcaecati quis
        rem. Laborum.
    </div>
    <div>A adipisci at autem blanditiis commodi corporis cumque dolor ea eos error esse, eveniet ex expedita ipsa
        molestiae nostrum, officia perspiciatis, praesentium quasi quis quos rem soluta tempora ullam voluptas.
    </div>
    <div>Adipisci aliquam ea eligendi, et fugiat, fugit magnam nisi possimus quis sunt tempore unde! A accusantium aut
        beatae eligendi eveniet facere illum ipsam iusto labore molestiae, molestias mollitia omnis, quo.
    </div>
    <div>Aperiam culpa distinctio doloremque eius, eos et, eum fugit hic id incidunt necessitatibus perferendis quod
        ratione repudiandae suscipit. Architecto beatae cupiditate deleniti dolor quae reiciendis. At illum ipsam sit
        unde.
    </div>
    <div>Commodi, nisi officia. A aliquam aperiam consectetur cumque dicta ea eveniet expedita, ipsam libero minus
        mollitia necessitatibus nisi porro repudiandae, vel. Ad asperiores blanditiis consequuntur minima provident
        quisquam rem sunt!
    </div>
    <div>In nesciunt odio odit quaerat ut. Alias aliquid id ipsa ipsam quos? Eligendi fugiat id laboriosam libero
        officiis quasi quod velit! Commodi eveniet maiores nobis nostrum temporibus, ut voluptate voluptates.
    </div>
    <div>Aperiam beatae doloribus fugiat itaque quidem recusandae sunt? Ad aliquam atque ea eaque eligendi facilis fugit
        ipsa, laboriosam, neque omnis provident ullam vitae? Dolores eos expedita illo suscipit temporibus, voluptate?
    </div>
    <div>At perferendis quam quas suscipit tempora. Accusamus at dolor explicabo harum, laboriosam quia quis quod
        voluptate. Ab alias aliquam deserunt error, excepturi neque nisi odit quis sapiente, sed veritatis voluptates!
    </div>
    <div>Accusamus, nesciunt, sequi! Cumque illo neque quas qui ratione ut, veritatis voluptatem? Accusantium alias
        aspernatur cupiditate dicta fugit in, ipsam labore nesciunt perspiciatis praesentium sequi, similique vel. Illum
        modi, quisquam.
    </div>
    <div>Accusamus aliquid atque dicta dolorem eaque nobis pariatur quas quasi sit voluptatum. Esse exercitationem, id
        illo inventore, iusto libero officiis omnis praesentium quas qui, repellendus sunt. Accusamus aliquam debitis
        labore?
    </div>
    <div>Consectetur enim, ipsa. Assumenda, commodi, culpa dolore eaque excepturi minima nulla obcaecati officia omnis
        quod quos ratione rem suscipit, tempore unde. Dolor dolore ea eaque earum eveniet in, itaque soluta!
    </div>
    <div>Accusamus atque blanditiis commodi dolorem dolorum enim excepturi exercitationem molestias, nulla omnis
        perspiciatis quas quo quod, rerum sequi velit voluptates! Accusantium blanditiis consequatur deleniti dolorem,
        maxime minus optio possimus voluptates?
    </div>
    <div>Ad at earum facilis, incidunt iusto laboriosam non numquam obcaecati tenetur vero. Fuga fugit id impedit in
        minus nostrum quisquam totam vel! Culpa molestias perspiciatis quasi recusandae rerum saepe velit!
    </div>
    <div>Aliquam amet cumque, eos ex iste optio ratione! Enim exercitationem nemo neque quae quisquam rem sed voluptate?
        Animi aperiam atque dolorum eligendi hic, maiores nesciunt quaerat recusandae, repudiandae, sed tenetur.
    </div>
    <div>Doloribus est fugit unde. Commodi iure natus non odit provident quia, ullam vitae voluptates! A amet
        consequuntur deserunt, doloremque dolorum esse natus sit soluta tempora unde. Ab dicta esse temporibus.
    </div>
    <div>Architecto consequatur earum ipsam, quis repudiandae sed sit? Accusamus asperiores cumque deserunt dicta
        dolorem, doloribus, facere incidunt iste iusto libero maxime mollitia natus numquam odit officia perspiciatis
        suscipit tempore vero!
    </div>
    <div>Ab accusamus, aliquam architecto asperiores aspernatur dicta doloremque eaque eligendi excepturi exercitationem
        ipsum iste magnam molestiae nam nisi numquam quod quos sed sequi sint sunt vel velit voluptatum? Alias,
        assumenda.
    </div>
    <div>Aliquid consectetur inventore molestiae nemo quod, ratione saepe voluptates. Aut commodi culpa dolore dolorem
        ex excepturi ipsam laborum molestiae, quod sit, tempora tempore temporibus voluptatum! Autem laboriosam laborum
        nihil sed?
    </div>
    <div>Adipisci aliquid animi, architecto aspernatur, atque commodi consectetur eligendi ex recusandae sint sit soluta
        sunt voluptatum. Esse numquam, totam. Amet, cupiditate distinctio in non quis sapiente similique sit velit
        voluptatum!
    </div>
    <div>Aperiam, culpa deserunt dolores enim ex excepturi hic id incidunt ipsam natus nemo, numquam officia perferendis
        possimus repellat repellendus ullam. Aliquid iste laborum suscipit voluptatum! Quaerat reiciendis repudiandae
        suscipit velit.
    </div>
    <div>Dignissimos, doloremque dolores perferendis placeat quasi reprehenderit? Aspernatur autem consectetur corporis
        cumque cupiditate debitis dicta, eum expedita illum impedit inventore laborum porro quis quo reiciendis rerum
        sint veniam voluptate voluptatum.
    </div>
</div>

</body>
</html>